<template>
	<view class="video">
		<view class="content" v-for="(item,index) in res" :key="index">  
			<video :src="item.src" controls objectFit="fill" enable-danmu danmu-btn controls poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"></video>
			<p  @tap="jump(item.id)">{{item.title}}</p>
			<view class="label">
				<view class="dis">
					<image src="../../static/img/news/pinglun.png" style="width:50upx;height:50upx"></image>
					<text>评论</text>
				</view>
				<view class="dis">
					<image src="../../static/img/news/xin1.png" style="width:50upx;height:50upx"></image>
					<text>点赞</text>
				</view>
				<view class="dis">
					<image src="../../static/img/news/shoucang2.png" style="width:50upx;height:50upx"></image>
					<text>收藏</text>
				</view>
				<view class="dis">
					<image src="../../static/img/news/dashang2.png" style="width:50upx;height:50upx"></image>
					<text>打赏</text>
				</view>
				<view class="dis" >
					<image src="../../static/img/news/fenxiang2.png" style="width:50upx;height:50upx"></image>
					<text>分享</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ["res"],
	data() {
		return{
			
		}
	},  
	methods:{
		jump(id){
			uni.navigateTo({
				url: '../../pages/news/videoDetails?id='+id
			});
		}
	}
}	
</script>

<style lang="scss">
.video{
	padding:0 30upx 30upx 30upx;
	.content{
		background-color: #FFFFFF;
		margin-bottom: 10upx;
		height: 570upx;
		width: 690upx;
		margin-top:25upx;
		z-index:1;
		video{
			width: 690upx;
			height: 380upx;
		}
		p{
			font-size: 32upx;
			padding: 0upx 30upx 15upx 30upx;
		}
		.label{
			margin-left: 30upx;
			display: inline-flex;
			color:#999999;
			font-size: 24upx;	
					border-top:1px solid #999999;
			.dis{
				width: 128upx;
				image{
					position: relative;
					top: 7px;
				}
			}
		}
	}
}
</style>
